<template>
	<div class="com-chart" ref="line2_ref"></div>
</template>

<script>
	export default {
		name: 'Linechart2',
		data() {
			return {
				chartInstance: null,
				echartoption: {},
			}
		},
		mounted() {
			this.initChart();
			window.addEventListener("resize", () => {
				this.chartInstance.resize();
			});
		},
		destroyed() {
			window.removeEventListener("resize", () => {
				this.chartInstance.resize();
			});
		},
		methods: {
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.line2_ref);
				this.echartoption = {
					tooltip: {
						trigger: "axis",
						axisPointer: {
							lineStyle: {
								color: "#dddc6b"
							}
						}
					},
					legend: {
						top: "0%",
						textStyle: {
							color: "rgba(255,255,255,.5)",
							fontSize: "12"
						}
					},
					grid: {
						left: "10",
						top: "30",
						right: "10",
						bottom: "10",
						containLabel: true
					},

					xAxis: [{
							type: "category",
							boundaryGap: false,
							axisLabel: {
								textStyle: {
									color: "rgba(255,255,255,.6)",
									fontSize: 12
								}
							},
							axisLine: {
								lineStyle: {
									color: "rgba(255,255,255,.2)"
								}
							},

							data: [
								"01",
								"02",
								"03",
								"04",
								"05",
								"06",
								"07",
								"08",
								"09",
								"11",
								"12"
							]
						},
						{
							axisPointer: {
								show: false
							},
							axisLine: {
								show: false
							},
							position: "bottom",
							offset: 20
						}
					],

					yAxis: [{
						type: "value",
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: "rgba(255,255,255,.1)"
							}
						},
						axisLabel: {
							textStyle: {
								color: "rgba(255,255,255,.6)",
								fontSize: 12
							}
						},

						splitLine: {
							lineStyle: {
								color: "rgba(255,255,255,.1)"
							}
						}
					}],
					series: [{
							name: "2019（亿元）",
							type: "line",
							smooth: true,
							symbol: "circle",
							symbolSize: 5,
							showSymbol: false,
							lineStyle: {
								normal: {
									color: "#0184d5",
									width: 2
								}
							},
							areaStyle: {
								normal: {
									color: new this.$echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
												offset: 0,
												color: "rgba(1, 132, 213, 0.4)"
											},
											{
												offset: 0.8,
												color: "rgba(1, 132, 213, 0.1)"
											}
										],
										false
									),
									shadowColor: "rgba(0, 0, 0, 0.1)"
								}
							},
							itemStyle: {
								normal: {
									color: "#0184d5",
									borderColor: "rgba(221, 220, 107, .1)",
									borderWidth: 12
								}
							},
							data: [
								30,
								40,
								30,
								40,
								30,
								40,
								30,
								60,
								20,
								40,
								20,
								40
							]
						},
						{
							name: "2020（亿元）",
							type: "line",
							smooth: true,
							symbol: "circle",
							symbolSize: 5,
							showSymbol: false,
							lineStyle: {
								normal: {
									color: "#00d887",
									width: 2
								}
							},
							areaStyle: {
								normal: {
									color: new this.$echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
												offset: 0,
												color: "rgba(0, 216, 135, 0.4)"
											},
											{
												offset: 0.8,
												color: "rgba(0, 216, 135, 0.1)"
											}
										],
										false
									),
									shadowColor: "rgba(0, 0, 0, 0.1)"
								}
							},
							itemStyle: {
								normal: {
									color: "#00d887",
									borderColor: "rgba(221, 220, 107, .1)",
									borderWidth: 12
								}
							},
							data: [
								50,
								30,
								50,
								60,
								10,
								50,
								30,
								50,
								60,
								40,
								60,
								40
							]
						}
					]
				};
				this.chartInstance.setOption(this.echartoption);
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
